<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body></body>
</html>
<script>
  // 常量路由：全部用户都可以访问到的路由
  // 常量路由：不需要权限的路由
  const constantRoute = [
    {
      // 登陆
      path: '/login',
      component: () => import('@/views/login/index.vue'),
      name: 'login', // 命名路由
      meta: {
        title: '登陆', // 菜单显示用的标题
        hidden: true, // 是否隐藏在菜单中
        icon: 'Promotion', // 菜单显示用的左侧图标，支持element-plus全部图标
      },
    },
    {
      //登陆成功以后展示数据的路由
      path: '/',
      component: () => import('@/layout/index.vue'),
      name: 'layout',
      meta: {
        // title: 'layout', // 面包屑不需要展示layout 判断有没有标题来展示
        hidden: false, // 是否隐藏在菜单中
        icon: 'Avatar', //
      },
      redirect: '/home',
      children: [
        {
          path: '/home',
          component: () => import('@/views/home/index.vue'),
          meta: {
            title: '首页', // 菜单显示用的标题
            hidden: false, // 是否隐藏在菜单中
            icon: 'HomeFilled', // 菜单显示用的左侧图标，支持element-plus全部图标
          },
        },
      ],
    },
    {
      path: '/404',
      component: () => import('@/views/404/index.vue'),
      name: '404',
      meta: {
        title: '404', // 菜单显示用的标题
        hidden: true, // 是否隐藏在菜单中
        icon: 'FolderDelete', // 菜单显示用的左侧图标，支持element-plus全部图标
      },
    },
    {
      path: '/screen',
      component: () => import('@/views/screen/index.vue'),
      name: 'Screen',
      meta: {
        title: 'screen', // 菜单显示用的标题
        hidden: false, // 是否隐藏在菜单中
        icon: 'Platform', // 菜单显示用的左侧图标，支持element-plus全部图标
      },
    },
  ]
  // 异步路由：有的用户有这个路由
  const asyncRoute = [
    {
      path: '/acl',
      component: () => import('@/layout/index.vue'),
      name: 'Acl',
      meta: {
        title: '权限管理', // 菜单显示用的标题
        icon: 'Lock', // 菜单显示用的左侧图标，支持element-plus全部图标
      },
      redirect: '/acl/user', // 面包屑跳转 到/acl会直接重定向到二级路由的一个
      children: [
        {
          path: '/acl/user',
          component: () => import('@/views/acl/user/index.vue'),
          name: 'User',
          meta: {
            title: '用户管理', // 菜单显示用的标题
            icon: 'User', // 菜单显示用的左侧图标，支持element-plus全部图标}
          },
        },
        {
          path: '/acl/role',
          component: () => import('@/views/acl/role/index.vue'),
          name: 'Role',
          meta: {
            title: '角色管理', // 菜单显示用的标题
            icon: 'Stamp', // 菜单显示用的左侧图标，支持element-plus全部图标}
          },
        },
        {
          path: '/acl/permission',
          component: () => import('@/views/acl/permission/index.vue'),
          name: 'Permission',
          meta: {
            title: '菜单管理', // 菜单显示用的标题
            icon: 'PriceTag', // 菜单显示用的左侧图标，支持element-plus全部图标}
          },
        },
      ],
    },
    {
      path: '/product',
      component: () => import('@/layout/index.vue'),
      name: 'Product',
      meta: {
        title: '商品管理', // 菜单显示用的标题
        icon: 'Goods', // 菜单显示用的左侧图标，支持element-plus全部图标
      },
      redirect: '/product/trademark', // 面包屑跳转 到/product会直接重定向到二级路由的一个
      children: [
        {
          path: '/product/trademark',
          component: () => import('@/views/product/trademark/index.vue'),
          name: 'Trademark',
          meta: {
            title: '品牌管理',
            icon: 'ShoppingCartFull',
          },
        },
        {
          path: '/product/attr',
          component: () => import('@/views/product/attr/index.vue'),
          name: 'Attr',
          meta: {
            title: '属性管理',
            icon: 'ChromeFilled',
          },
        },
        {
          path: '/product/spu',
          component: () => import('@/views/product/spu/index.vue'),
          name: 'Spu',
          meta: {
            title: 'Spu管理',
            icon: 'Lightning',
          },
        },
        {
          path: '/product/sku',
          component: () => import('@/views/product/sku/index.vue'),
          name: 'Sku',
          meta: {
            title: 'Sku管理',
            icon: 'Cloudy',
          },
        },
      ],
    },
  ]
  // 任意路由
  const anyRoutes = [
    {
      // 任意路由
      path: '/:pathMatch(.*)',
      redirect: '/404',
      name: 'Any',
      meta: {
        title: '任意', // 菜单显示用的标题
        hidden: true, // 是否隐藏在菜单中
        icon: 'DataLine', // 菜单显示用的左侧图标，支持element-plus全部图标
      },
    },
  ]
  //某个用户 硅谷333 routes[]
  let guigu333 = ['Product', 'Trademark', 'Sku']

  function filterAsyncRoute(asyncRoute, routes) {
    return asyncRoute.filter((item) => {
      if (routes.includes(item.name)) {
        if (item.children) {
          item.children = filterAsyncRoute(item.children, routes)
          // 赋值会导致asyncRoute改变，所以需要用一份新的asyncRoute操作
        }
        return true
      }
    })
  }
  // guigu333需要的异步路由
  let guigu333Result = filterAsyncRoute(asyncRoute, guigu333)
  console.log(guigu333Result)
  console.log(asyncRoute)
</script>
